<template>
  <div class="address-edit-box">
    <s-header :name="`${type === 'add' ? '新增商品' : '编辑商品'}`"></s-header>
    <van-form @submit="onSubmit">
      <van-field
          v-model="activity.activityName"
          name="name"
          label="活动名"
          placeholder="活动名"
          :rules="[{ required: true, message: '请填写活动名' }]"
      />
      <van-field name="radio" label="类型">
        <template #input>
          <van-radio-group v-model="activity.type" direction="horizontal">
            <van-radio name="1">限量</van-radio>
            <van-radio name="2">不限量</van-radio>
          </van-radio-group>
        </template>
      </van-field>

      <van-field
          v-model="startTime"
          is-link
          readonly
          name="datetimePicker"
          label="开始时间"
          placeholder="点击选择时间"
          @click="startTimePicker = true"
      />
      <van-popup v-model:show="startTimePicker" position="bottom">
        <van-datetime-picker
            type="datetime"
            @confirm="onConfirm1"
            @cancel="startTimePicker = false"
        />
      </van-popup>

      <van-field
          v-model="endTime"
          is-link
          readonly
          name="datetimePicker"
          label="结束时间"
          placeholder="点击选择时间"
          @click="endTimePicker = true"
      />
      <van-popup v-model:show="endTimePicker" position="bottom">
        <van-datetime-picker
            type="datetime"
            @confirm="onConfirm2"
            @cancel="endTimePicker = false"
        />
      </van-popup>


      <div style="margin: 16px;">
        <van-button round block color="#1baeae" native-type="submit">保存</van-button>
      </div>

    </van-form>

  </div>
</template>

<script>
import {reactive, onMounted, toRefs} from 'vue'
import {Toast} from 'vant'
import sHeader from '@/components/SimpleHeader'
import {useRoute, useRouter} from 'vue-router'
import {uploadHeadImg} from "@/service/file";
import {addGood, EditGood, getGoodById} from "@/service/good";
import {getActivityByGoodId} from "@/service/activity";

export default {
  components: {
    sHeader
  },
  setup() {
    const route = useRoute()
    const router = useRouter()
    const state = reactive({
      type: 'add',
      goodId: '',
      activity: '',
      startTimePicker: false,
      endTimePicker: false,
      startTime: '',
      endTime: '',
    })

    onMounted(async () => {
      state.goodId = route.query.goodId
      const {data: activity} = await getActivityByGoodId({goodId: state.goodId});
      if (activity) {
        state.activity = activity
        state.startTime = timestampToTime(activity.startTime)
        state.endTime = timestampToTime(activity.endTime)
        state.activity.type = activity.type.toString()

        state.type = 'edit'
      }
    })

    const onSubmit = async () => {


      state.type === 'add' ? addGood(state.good) : EditGood(state.good)
      Toast('保存成功')
      setTimeout(() => {
        router.back()
      }, 1000)
    }

    const onConfirm1 = (value) => {
      state.startTime = timestampToTime(value);
      state.activity.startTime = value.getTime();
      state.startTimePicker = false;
    };

    const onConfirm2 = (value) => {
      state.endTime = timestampToTime(value);
      state.activity.endTime = value.getTime();
      state.endTimePicker = false;
    };

    const timestampToTime = (timestamp) => {
      timestamp = timestamp ? timestamp : null;
      let date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
      let Y = date.getFullYear() + '-';
      let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
      let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
      let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
      let m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());
      return Y + M + D + h + m;
    }

    return {
      ...toRefs(state),
      onSubmit,
      onConfirm1,
      onConfirm2

    }
  }
}
</script>

<style lang="less">
@import '../../../common/style/mixin';

.edit {
  .van-field__body {
    textarea {
      height: 26px !important;
    }
  }
}

.address-edit-box {
  .van-address-edit {
    .van-button--danger {
      background: @primary;
      border-color: @primary;
    }

    .van-switch--on {
      background: @primary;
    }
  }
}
</style>
